<template>
  <div class="loading">
    <div class="l-icon"/>
    <div class="l-text"/>
    <el-progress class="progress" :percentage="percentage" color="#afe6b6" :show-text="false"/>
  </div>
</template>

<script>
export default {
  name:'loading',
  props:{
    percentage:{
      type:Number,
      default(){
        return 0
      }
    }
  },
  watch:{
    percentage(){
      if (this.percentage>=100) {
        this.$emit('setPage',1)
      }
    }
  }

}
</script>

<style lang="stylus">
@keyframes icon
  0%
    transform: rotateY(0deg);
  100%
    transform: rotateY(360deg);
.loading
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  .l-icon
    width: calc(100vw*(59/640));
    height: calc(100vw*(32/640));
    position: absolute;
    top: calc(100vw*(351/640));
    left:50vw;
    margin-left: calc(-50vw*(59/640));
    background: url('~assets/l-icon.png') no-repeat;
    background-size: 100%;
    animation:icon 5s infinite;
  .l-text
    width: calc(100vw*(102/640));
    height: calc(100vw*(27/640));
    position: absolute;
    top: calc(100vw*(407/640));
    left:50vw;
    margin-left: calc(-50vw*(102/640));
    background: url('~assets/l-text.png') no-repeat;
    background-size: 100%;
  .progress
    width: calc(100vw*(496/640));
    height: calc(100vw*(7/640));
    position: absolute;
    top: calc(100vw*(477/640));
    left:50vw;
    margin-left: calc(-50vw*(496/640));
@media only screen and (device-aspect-ratio:3/4),
only screen and (device-aspect-ratio:512/683)
  .loading
    .l-icon
      top: calc(100vh*(301/800));
    .l-text
      top: calc(100vh*(357/800));
    .progress
      top: calc(100vh*(427/800));
</style>
